<template>
  <div class="container">
    <el-card class="box-card">
      <div v-if="!voluntarily">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="headcrumbs">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.id?$route.query.name : '' }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
      </div>
      <el-form :inline="true" class="demo-form-inline">
        <div>
          <el-form-item label="目录名称" size="small">
            <el-input v-model.trim="cataloguetotal.directoryName"></el-input>
          </el-form-item>
          <el-form-item class="state" label="状态">
            <el-select placeholder="请选择" size="small" v-model="cataloguetotal.state">
              <el-option v-for="item in cataloguestate" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="eliminatesearch">清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="searchcatalogue">搜索</el-button>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button class="goback" plain icon="el-icon-back" size="mini" @click="$router.go(-1)" v-if="!voluntarily">
            返回学科</el-button>
          <el-button class="catalog" type="primary" :icon="Edit" size="mini" @click="onAdd">新增目录</el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon :closable="false"> </el-alert>
      <!-- 表单页面 -->
      <el-table style="width: 100%" :data="list">
        <el-table-column label="序号" type="index" width="100"> </el-table-column>
        <el-table-column label="所属学科" prop="subjectName" width="200"> </el-table-column>
        <el-table-column label="目录名称" prop="directoryName" width="180"> </el-table-column>
        <el-table-column label="创建者" prop="username" width="200"> </el-table-column>
        <el-table-column label="创建日期" width="200">
          <template #default="{ row }">
            {{ formatTime(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals" width="180"> </el-table-column>
        <el-table-column label="状态" width="200">
          <template #default="{ row }">
            <!-- {{ formatEmployee(row.state) }} -->
            {{ row.state === 0 ? '已禁用' : '已启动' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">
                {{ scope.row.state === 1 ? '启动' : '禁用' }}
            </el-button>
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">禁用</el-button> -->
            <el-button :disabled="scope.row.state === 0" @click="modification(scope.row)" type="text" size="small">修改
            </el-button>
            <el-button :disabled="scope.row.state === 0" @click="deletecatalogue(scope.row)" type="text" size="small">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <div></div>
          <el-pagination background layout="prev, pager, next,sizes,jumper" :page-count="Paging.total"
          :page-sizes="[5, 10, 20, 50]" :page-size="Paging.pagesize" @current-change="pageChange"
          @size-change="sizepageSize" v-if="pagingestimate">
        </el-pagination>
      </div>
    </el-card>
    <DirectorysAdd ref="directorysAddRef" @getcatalogue="getcatalogue()"></DirectorysAdd>
  </div>
</template>

<script>
import { list as getDirectorys } from '@/api/hmmm/directorys.js'
import { list as getSubjects } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      directors: [],
      subjects: []
    }
  },
  async created () {
    this.directors = await getDirectorys()
    this.subjects = await getSubjects()
  }
}
</script>
